import { Component, OnInit } from '@angular/core';
import * as figlet from 'figlet';
@Component({
  selector: 'app-fkm',
  templateUrl: './fkm.component.html',
  styleUrls: ['./fkm.component.css'],
})
export class FKMComponent implements OnInit {
  public FKM: any = 'FKM';
  public KGrid: any = [];
  public FGrid: any = [];
  public MGrid: any = [];
  public grids: any = [...Array.from({ length: 81 }).keys()];
  constructor() {}
  ngOnInit() {
    figlet.defaults({ fontPath: 'assets/fonts' });
    this.initText('FKM');
    this.getK();
    this.getF();
    this.getM();
  }

  /**
   * 写字思路: 画板上有9*9个格子, 画坐标线(0到9), 原点是(x,y)即(0,0), 坐标点即格子左下角的点, 给这些格子赋值即可(数学坐标系和代码生成的gird坐标是水平翻转的)
   */
  getK() {
    /** 令 K字符 高9宽5, 坐标线一共3条:
     *	kx + 5 = y, k = 1, x => (0, 5)
     *  kx = y = 5, k = 1, x => (0, 5)
     *  x + ky = 9, k = 0, y => (0, 9)
     * */
    let x: number = 0,
      y: number = 0,
      arrGrid: any = [];
    // 两条曲线坐标
    while (x <= 5) {
      y = x + 5;
      arrGrid.push(x + (9 - y) * 9);
      y = 5 - x;
      arrGrid.push(x + (9 - y) * 9);
      x++;
    }
    y = 0;
    x = 0;
    // 直线坐标
    while (y <= 9) {
      arrGrid.push(x + (9 - y) * 9);
      y++;
    }

    this.KGrid = [...arrGrid];
  }

  getF() {
    /** 令 F字符 高9宽5, 坐标线一共3条:
     *	kx + 9 = y, k = 0, x => (0, 5)
     *  kx + 5 = y, k = 0, x => (0, 5)
     *  x + ky = 9, k = 0, y => (0, 9)
     * */
    let x: number = 0,
      y: number = 0,
      arrGrid: any = [];
    // 两条曲线坐标
    while (x < 5) {
      y = 9;
      arrGrid.push(x + (9 - y) * 9);
      y = 5;
      arrGrid.push(x + (9 - y) * 9);
      x++;
    }
    y = 0;
    x = 0;
    // 直线坐标
    while (y <= 9) {
      arrGrid.push(x + (9 - y) * 9);
      y++;
    }
    this.FGrid = [...arrGrid];
  }

  getM() {
    /** 令 M字符 高9宽9, 坐标线一共4条:
     *	9 + kx = y, k = -1, x => (0, 5)
     *  kx = y, k = 1, x => (5, 9)
     *  x + ky = 9, k = 0, y => (0, 9)
     *  x + ky = 9, k = 0, y => (0, 9)
     * */
    let x: number = 0,
      y: number = 0,
      arrGrid: any = [];
    // 两条曲线坐标
    while (x < 5) {
      y = 9 - x;
      arrGrid.push(x + (9 - y) * 9);
      x++;
    }
    x = 5;
    while (x <= 9) {
      y = x;
      arrGrid.push(x + (9 - y) * 9 - 1);
      x++;
    }

    // 直线坐标1
    x = 0;
    y = 0;
    while (y <= 9) {
      arrGrid.push(x + (9 - y) * 9);
      y++;
    }
    // 直线坐标2
    x = 9;
    y = 0;
    while (y <= 9) {
      arrGrid.push(x + (9 - y) * 9 - 1);
      y++;
    }
    this.MGrid = [...arrGrid];
  }

  initText(str: string) {
    // console.log(figlet.fontsSync());
    figlet.defaults({ fontPath: 'assets/fonts' });
    // 字体选择:Doh | 3x5 |
    figlet.text(
      str,
      {
        font: 'Alphabet',
        horizontalLayout: 'full',
        verticalLayout: 'full',
      },
      (err, data) => {
        this.FKM = data;
      }
    );

    figlet.text(
      str,
      {
        font: 'Doh',
        horizontalLayout: 'full',
        verticalLayout: 'full',
      },
      (err, data) => {
        console.log(data);
      }
    );
  }
}
